<template>
  <el-dialog v-if="load" :close-on-click-modal="false" :title="title" v-model="visible" align-center width="1260px" :z-index="2000"
    @close="handleClose">
    <div v-show="data.length > 1">
      <div class="flex items-center mb-3 gap-3">
        <VSelect v-model="form.supplier_id" type="supplier" placeholder="供应商" clearable
          @change="({ option }) => supplierChange(form, option)" class="w-40" />
        <el-input-number v-model="form.price_exclude_tax" controls-position="right" :min="0" :step="0.01" :precision="2"
          placeholder="产品价格" class="w-40" />
        <VSelect v-model="form.is_refund_tax" placeholder="是否退税" :options="options.is_refund_tax" class="w-40" />
        <el-input v-model="form.goods_link" class="w-80" placeholder="产品链接" clearable />
        <el-button type="primary" @click="update">修改</el-button>
      </div>
    </div>
    <vxe-table ref="tableRef" :data="data">
      <vxe-column type="checkbox" width="40"></vxe-column>
      <vxe-column field="sku" title="sku" width="100"></vxe-column>
      <vxe-column field="sku_specification" title="属性" width="120">
        <template #default="{ row }">
          <VText :value="row.sku_specification" line="3" />
        </template>
      </vxe-column>
      <vxe-column title="图片" width="80">
        <template #default="{ row }">
          <VImage :src="row.main_img" size="60px" />
        </template>
      </vxe-column>
      <vxe-column field="sku_cn_title" title="产品名称" min-width="100">
        <template #default="{ row }">
          <VText :value="row.sku_cn_title" :line="3" />
        </template>
      </vxe-column>
      <vxe-column title="供应商" width="180">
        <template #default="{ row }">
          <VSelect v-model="row.supplier_id" type="supplier" placeholder="请选择" clearable class="w-full"
            @change="({ option }) => supplierChange(row, option)" />
        </template>
      </vxe-column>
      <vxe-column title="采购价格" width="100">
        <template #default="{ row }">
          <el-input-number v-model="row.price_exclude_tax" :controls="false" :min="0" :step="0.01" :precision="2"
            placeholder="请输入" class="w-full" />
        </template>
      </vxe-column>
      <vxe-column title="是否退税" width="120">
        <template #default="{ row }">
          <VSelect v-model="row.is_refund_tax" placeholder="请选择" :options="options.is_refund_tax" class="w-28" />
        </template>
      </vxe-column>
      <vxe-column title="采购链接" min-width="160">
        <template #default="{ row }">
          <el-input v-model="row.goods_link" type="textarea" :rows="3" placeholder="请输入" />
        </template>
      </vxe-column>
    </vxe-table>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loadings.submit" @click="submit">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import api from '../api'
import { ElMessage } from 'element-plus'
import XEUtils from 'xe-utils'
const props = defineProps({
  options: { type: Object, default: () => ({}) },
})

const load = ref(false)
const visible = ref(false)
const success = ref(false)
let loadings = reactive({})
const form = ref({})
const data = ref([])
const title = ref('title')

const emit = defineEmits(['close', 'success'])

// 修改
const tableRef = ref()
const update = () => {
  const selection = tableRef?.value.getCheckboxRecords()
  if(!selection.length) {
    ElMessage.warning('请先选择行')
    return
  }
  selection.forEach(d => {
    for (const key in form.value) {
      const value = form.value[key]
      if(value) {
        d[key] = value
      }
    }
  })
}

// 打开弹窗
const open = async (selection) => {
  if (selection && !selection.length) {
    ElMessage.warning('请先选择行!')
    return
  }
  title.value = selection.length > 1 ? '批量修改供应商' : '修改供应商'
  const rows = XEUtils.clone(selection, true)
  data.value = XEUtils.clone(rows.map(d => {
    d.price_exclude_tax = +d.purchase_price
    return d
  }), true)
  const res = await api.detail({ p_ids: selection.map(d => d.p_id) })
  data.value = res.data
  if (!load.value) {
    load.value = true
    await 1
  }
  success.value = false
  loadings = reactive({})
  visible.value = true
  await 1
  nextTick(() => {
    tableRef?.value.setAllCheckboxRow(true)
  })
}

const supplierChange = (row, option) => {
  row.supplier_name = option?.label
}

// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
  success.value && emit('success')
}
// 提交
const submit = () => {
  const data = tableRef?.value.getCheckboxRecords()
  if(!data.length) {
    ElMessage.warning('请先选择行')
    return
  }
  loadings.submit = true
  const products = data.map(d => {
    const { p_id, supplier_id, supplier_name, price_exclude_tax, is_refund_tax, goods_link } = d
    return { p_id, supplier_id, supplier_name, price_exclude_tax, is_refund_tax, goods_link }
  })
  api.batchEditSupplier({ products }).then(res => {
    success.value = true
    ElMessage.success('操作成功')
    close()
  }).finally(() => {
    loadings.submit = false
  })
}

defineExpose({ open })
</script>